<template>
  <div class="app-container detail">
    <el-row class="headline">
      <el-col :span="3">
        <span>担保详情</span>
      </el-col>
      <el-col :span="9" :offset="7">
        <el-steps align-center :space="100">
          <el-step title="初审" class="stepActive" />
          <el-step title="复审" class="stepActive" />
          <el-step title="终审" class="stepActive" />
          <el-step title="放款" class="stepActive" />
          <el-step title="还款" class="stepActive" />
          <el-step title="完成" />
        </el-steps>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button size="small" :icon="Printer" v-print="printObj" @click="upadtaPrintStatus">打印</el-button>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button size="small" @click="goBack" :icon="ArrowLeft">返回</el-button>
      </el-col>
    </el-row>
    <div ref="printTest" id="printTest">
      <div class="info-title">（客户【{{ customerName }}】还款信息）</div>
      <el-row justify="center">
        <el-col :span="23">
          <el-table :data="cutomerList">
            <el-table-column label="期限" align="center" key="stages_phase" prop="stages_phase" width="60px" />
            <el-table-column label="应还款日" align="center" key="pmt_due_date" prop="pmt_due_date" />
            <el-table-column label="实际还款日" align="center" key="grace_date" prop="grace_date" width="140px">
              <template #default="scope">
                <div>{{ scope.row.grace_date }}</div>
              </template>
            </el-table-column>
            <el-table-column label="本金" align="center" key="ctd_principal_amt" prop="ctd_principal_amt" />
            <el-table-column label="利息" align="center" key="ctd_interesta_amt" prop="ctd_interesta_amt" />
            <el-table-column label="管理费" align="center" key="manage_amt" prop="manage_amt" />
            <el-table-column label="还款总额" align="center" key="stages_amount" prop="stages_amount" />
            <el-table-column label="减免金额" align="center" key="reduction_amt" prop="reduction_amt" />
            <el-table-column label="逾期天数" align="center" key="overdue_days" prop="overdue_days" />
            <el-table-column label="状态" align="center" key="status" prop="status" />
            <el-table-column label="提交人" align="center" key="submitter_name" prop="submitter_name" />
            <el-table-column label="提交时间" align="center" key="submit_time" prop="submit_time" width="120px" />
            <el-table-column label="还款备注" align="center" key="submit_str" prop="submit_str" width="120px">
              <template #default="scope">
                <div>{{ scope.row.submit_str }}</div>
              </template>
            </el-table-column>
            <el-table-column label="审核意见" align="center" key="review_str" prop="review_str" />
            <el-table-column label="审核人" align="center" key="reviewer_name" prop="reviewer_name" />
          </el-table>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="16">
          <div style="margin-top: 20px">
            <TabAcross title="担保信息" :list="loanList" :cutName="customerName"></TabAcross>
            <TabAcross title="费用信息" :list="costList" :cutName="customerName"></TabAcross>
            <TabAcross title="银行信息" :list="bankList" :cutName="customerName"></TabAcross>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup name="Paydetail">
import { ArrowLeft, Printer } from "@element-plus/icons-vue";
import { detail } from "@/api/collection/expire";

import { onActivated, reactive } from "vue";
import { getId } from "@/utils/auth";
import TabAcross from "@/components/TabAcross";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const customerName = ref("");
const aduitShow = ref(false);
const cutomerList = ref([]);

const data = reactive({
  aduitForm: {
    id: undefined,
    apply_id: undefined,
    review_result: undefined,
    review_str: undefined,
  },
  customerInfos: {
    user_name: "",
    loan_type_classify: "",
    loan_type_name: "",
    loan_stages: "",
    apply_quota: "",
    method_type: "",
    contract_amount: "",
    approval_amount: "",
    purpose_name: "",
    approval_rate: "",
  },
  rulest: {
    review_result: [{ required: true, message: "请选择审核结论", trigger: "change" }],
  },
});
const { aduitForm, customerInfos, rulest } = toRefs(data);
const loanList = ref([]);
const costList = ref([]);
const bankList = ref([
  [
    { title: "开户行：", value: "中国银行" },
    { title: "户名：", value: "李海" },
  ],
  [
    { title: "开户地：", value: "广东省 深圳市 福田区" },
    { title: "支行名称：", value: "开户行支行名称" },
  ],
  [{ title: "银行帐号：", value: "6225 8888 8888 8888" }],
]);
function viewDetail() {
  detail(history.state.infos.apply_id).then((res) => {
    console.log(res);
    cutomerList.value = res.data.map((item) => {
      item.pmt_due_date = item.pmt_due_date.slice(0, 10);
      item.grace_date = item.grace_date?.slice(0, 10);
      return item;
    });
  });
}
/**获取数据信息*/
function getInfos() {
  customerInfos.value = { ...history.state.infos };
  console.log(customerInfos.value);
  customerName.value = history.state.infos.user_name;
  loanList.value = [
    [
      { title: "客户姓名：", value: customerInfos.value.user_name, link: "客户资料档案" },
      { title: "", value: "" },
    ],
    [
      { title: "担保性质：", value: customerInfos.value.loan_type_classify },
      { title: "担保类型：", value: customerInfos.value.loan_type_name },
    ],
    [
      { title: "担保用途：", value: customerInfos.value.purpose_name },
      { title: "还款方式：", value: customerInfos.value.method_type },
    ],
    [
      { title: "担保期限：", value: customerInfos.value.loan_stages },
      { title: "申请金额：", value: customerInfos.value.apply_quota },
    ],
    [
      { title: "审批金额：", value: customerInfos.value.approval_amount },
      { title: "合同金额：", value: customerInfos.value.contract_amount },
    ],
  ];
  costList.value = [
    [
      { title: "综合利率：", value: customerInfos.value.approval_rate },
      { title: "服务费：", value: "0.0（0.00元）" },
    ],
    [{ title: "管理费：", value: "0.0% （每月0.00元）" }],
  ];
}
/** 返回 */
function goBack() {
  proxy.$tab.closeOpenPage("expire");
}
let printObj = reactive({
  id: "printTest", //绑定打印区域id
  popTitle: "", //内容标签
  beforeOpenCallback(vue) {
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
});
function upadtaPrintStatus() {}
getInfos();
viewDetail();
</script>
<style lang="scss" scoped>
.info-title {
  line-height: 72px;
  text-align: center;
}
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
</style>
